/*
 * Copyright (c) 2013, Juergen Bocklage-Ryannel, Johan Thelin
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of the editors nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

// M1>>
import QtQuick 2.5
import "../common"
/*
视图末尾的行为是由到boundsBehavior属性的控制的。这是一个枚举值，并且可以
配置为默认的Flickable.DragAndOvershootBounds，视图可以通过它的边界线来拖
拽和翻阅，配置为Flickable.StopAtBounds，视图将不再可以移动到它的边界线之
外。配置为Flickable.DragOverBounds，用户可以将视图拖拽到它的边界线外，但
是在边界线上翻阅将无效。
使用snapMode属性可以限制一个视图内元素的停止位置。默认行为下是
ListView.NoSnap，允许视图内元素在任何位置停止。将snapMode属性设置为
ListView.SnapToItem，视图顶部将会与元素对象的顶部对齐排列。使用
ListView.SnapOneItem，当鼠标或者触摸释放时，视图将会停止在第一个可见的元
素，这种模式对于浏览页面非常便利
*/
Background {
    width: 80
    height: 300

    ListView {
        anchors.fill: parent
        anchors.margins: 20

        clip: true

        // 模型数量 100
        model: 100
        // 使用代理numberDelegate生成视图项显示数据
        delegate: numberDelegate
        spacing: 5
    }

    // 代理负责显示数据
    Component {
        id: numberDelegate

        GreenBox {
            width: 40
            height: 40
            text: index
            // 通过这两行输出可以看出，代理时动态创建销毁视图项显示数据的，大数据显示无压力
            Component.onCompleted: console.log(index + "create")
            Component.onDestruction: console.log(index + "destory")
        }
    }
}
// <<M1
